<template>
    <!-- <p> 动态路由页面id---{{ $route.params.id }} </p> -->
    <!-- <el-button @click="ElMessage('hello')">button</el-button> -->
    <p>文章列表</p>
    <el-table :data="datalist" style="width:500px">
        <el-table-column prop="title" labbel="题目" />
        <!-- <el-table-column prop="introduce_html" width="120" /> -->
    </el-table>
</template>
  
<script setup>
const page = ref(0)
const route = useRoute();
//获取动态id
// console.log("route.params.id", route.params.id)
page.value = ref(route.params.id);
const datalist = ref([])

const runtimeConfig = useRuntimeConfig();
const { apiBaseUrl } = runtimeConfig.public;
// console.log("apiBaseUrl", runtimeConfig, apiBaseUrl)
// import axios from "axios"

// 数据请求 useFetch、useAsyncData 、useLazyAsyncData、、useLazyFetch

//1、 $fetch \ fetch \axios

// const { data } = await $fetch('/http://121.36.81.61:8000/getTenArticleList', { query: { name: 'tom' } })
// const { result } = await $fetch('http://121.36.81.61:8000/getTenArticleList', { method: 'post', body: {a:1} })

// fetch('http://localhost:8081')
//   .then(response => response.json())
//   .then(data => console.log("fetch-getabout-data",data));

// $fetch('http://localhost:8082')
//     .then(res => {
//         console.log(111111)
//         console.log("$fetch-getabout-data", res)
//     })


// 2、useFetch
const { data, pending, error, refresh } = await useFetch('/getTenArticleList', {
    method: 'GET',
    baseURL: apiBaseUrl
})
datalist.value = toRaw(data.value.data)
console.log("useFetch-data-result", data.value.data)

//  axios 请求完成的动作
// axios.get('http://localhost:8082').then(res => {
//     console.log(res)
// })

// const { data, pending, error, refresh } = await useLazyFetch(apiBaseUrl + '/getTenArticleList')
// console.log("useLazyFetch-data-result", data.value.data)
// datalist.value = data.value.data



//3、useAsyncData 访问异步解析的数据

// const { data } = await useAsyncData("getList", () =>
//     $fetch("http://localhost:8082"),{
//     pick: ["data"]
// }
// );
// datalist.value = toRaw(data.value.data)
// console.log("useAsyncData-data-result", toRaw(data.value.data))

//4、useLazyAsyncData  常用lazy，默认是false，设置成true 就是需要数据都返回后，才会显示出来 ，简单说就是会阻塞页面；
// useLazyAsyncData 和useLazyFetch 他们只是把配置选项中的Lazy 设置成了true， 也就是会阻塞页面
// const { data } = await useLazyAsyncData("getList", () =>
//     $fetch("http://121.36.81.61:8000/getTenArticleList"),{
//     pick: ["data"]
// }
// );


// ===useLazyFetch===
// const { data, pending, error, refresh } = await useLazyFetch(apiBaseUrl + '/getTenArticleList')
// console.log("useLazyFetch-data-result", data.value.data)
// datalist.value = data.value.data

// console.log("useLazyAsyncData-data-result", toRaw(data.value.data))
// datalist.value = toRaw(data.value.data)

</script>
  
<style></style>